<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    #demo {
      width: 200px;
      height: 200px;
      background-color: #6ff;
      margin: 100px;
      border: 2px solid transparent;
    }

    .active {
      border-color: red !important;
    }
  </style>
</head>

<body>
  <div id="demo" class="one two three" title="hello" asd="asd" data-id="1">test</div>
</body>
<script>
  var demo = document.getElementById("demo");
  console.dir(demo);   //元素节点  => 对象 (存在官方给定的属性修饰)

  // className  获取和设置元素的class名
  // console.log(demo.className);
  // demo.className = "four";


  // classList  返回class形成的集合 (多class名)
  console.log(demo.classList);

  // classList 相关的方法 (主要用来class列表(one two three)处理单个class名的增删改查)
  // add()     向匹配的元素添加一个或多个class名(逗号分隔)
  // remove()  删除匹配的元素指定class名(一个或多个class名(逗号分隔))
  // replace(oldCls,newCls)  替换匹配元素的某个class名
  // contains()  判断匹配的元素中是否含有某个class名 存在=>true  不存在=> 则返回false
  // toggle()    class切换 => 判断匹配的元素中是否含有某个class名 不存在 => 新增  存在 => 删除


  demo.classList.add("four", "five");
  demo.classList.remove("four", "five");

  demo.classList.replace("one", "first");
  demo.classList.replace("two", "second");

  var flag = demo.classList.contains("three");
  console.log(flag);

  // demo.classList.toggle("six");   //没有就新增
  // demo.classList.toggle("six");   //有就删除


  demo.onclick = function () {
    demo.classList.toggle("active");
  }


    // 总结 
    // className  一般适用于单个class(元素中没有class名或者只有一个)
    // classList  一般适用于多个class(对多个class中的某一个进行操作 增删改查)





</script>

</html>